<template>
   
  <!-- 进度条 -->
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写楼盘信息"></el-step>
      <el-step title="上传楼盘图片"></el-step>
      <el-step title="添加电梯信息"></el-step>
      <!-- <el-step title="上传电梯图片"></el-step> -->
    </el-steps>
    <product-info-detail
      v-show="showStatus[0]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
    >
    </product-info-detail>
    <product-sale-detail
      v-show="showStatus[1]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
      @prevStep="prevStep"
    >
    </product-sale-detail>
    <!-- <product-attr-detail
      v-show="showStatus[2]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
      @prevStep="prevStep">
    </product-attr-detail> -->
    <product-relation-detail
      v-show="showStatus[2]"
      v-model="productParam"
      :is-edit="isEdit"
      @prevStep="prevStep"
      @finishCommit="finishCommit(isEdit)"
    >
    </product-relation-detail>
  </el-card>
</template>
<script>
import ProductInfoDetail from "./ProductInfoDetail";
import ProductSaleDetail from "./ProductSaleDetail";
import ProductAttrDetail from "./ProductAttrDetail";
import ProductRelationDetail from "./ProductRelationDetail";
import { createProduct, getProduct, updateProduct } from "@/api/product";
import { addloupan, getLouPanDetail, changeloupan } from "@/api/aself";

// 默认楼盘信息
const defaultProductParam = {
  url: "", //楼盘图片
  name: "", //楼盘图片
  address: "", //地址
  lift: 1, //可投放电梯数  根据这个去决定电梯信息界面要多少条数据
  liftArr: [],
  price: 0, //15s 价格
  type: 0, //楼盘类型
  latitude: 0, //纬度
  longitude: 0, //经度
  size: 2, //楼盘等级
  Rent: 0, //租金价格
  Cheekin: 0, //入住规模
  CheekinPercent: 0, //入住率
  tall: 0, //最高楼层
  noType: "", //禁止投放类别
  price5: 0, //5s价格
  price10: 0, //10s价格
};
export default {
  name: "ProductDetail",
  components: {
    ProductInfoDetail,
    ProductSaleDetail,
    ProductAttrDetail,
    ProductRelationDetail,
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: 0,
      productParam: Object.assign({}, defaultProductParam),
      showStatus: [true, false, false],
    };
  },
  created() {
    // 修改订单信息 获取原始数据并展示
    if (this.isEdit) {
      console.log("id", this.$route.query.id);
      getLouPanDetail(this.$route.query.id).then((response) => {
        this.productParam = response.data[0];
        console.log("liftarr--", this.productParam.liftArr);
        console.log("获取楼盘信息", response.data[0]);
      });
    }
  },
  methods: {
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false;
      }
    },
    prevStep() {
      if (this.active > 0 && this.active < this.showStatus.length) {
        this.active--;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    nextStep() {
      if (this.active < this.showStatus.length - 1) {
        this.active++;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    finishCommit(isEdit) {
      // console.log("this.productParam", this.productParam, "isEdit", isEdit);

      this.$confirm( isEdit?'是否保存修改':'是否添加该楼盘', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.productParam.liftArr = JSON.stringify(this.productParam.liftArr);
        // 将电梯信息转为json
        if (isEdit) {
          // 需要获取楼盘id参数
          const data = { id: this.$route.query.id, loupan: this.productParam };
          changeloupan(data).then((response) => {
            this.$message({
              type: "success",
              message: "修改保存成功",
              duration: 1000,
            });
            this.$router.back();
          });
        } else {
          const data = this.productParam;

          console.log("添加楼盘参数---", this.productParam, data);

          // console.log(data.liftArr);
          addloupan(data).then((response) => {
            this.$message({
              type: "success",
              message: "提交成功",
              duration: 1500,
            });
            // 跳转到楼盘列表
            this.$router.push({ path: "/pms/product" });
          });
        }
      });
    },
  },
};
</script>
<style>
.form-container {
  width: 960px;
}
.form-inner-container {
  width: 800px;
}
</style>


